/// <reference path="references.scss" />

// Star Rating
// TODOs: colors, mobile
// ==============================================================

.star-rating {
    --star-size: 22px;
    --star-padding-x: 2px;
    --star-checked-color: #f9bc1b;
    --star-hover-color: #f30;

    display: inline-block;

    &.star-rating-large {
        --star-size: 30px;
    }

    &.star-rating-small {
        --star-size: 18px;
        --star-padding-x: 1px;
    }

    &.star-rating-mini {
        --star-size: 14px;
        --star-padding-x: 1px;
    }
}

.star-rating > input[type="radio"] {
    position: absolute;
    left: -9999px;
}

.star-rating > label {
    margin: 0;

    &:active {
	    position: relative;
	    top: 1px;
	    left: 1px;
    }
}

.star-rating:not(:checked) {
    > label {
	    float: right;
	    overflow: hidden;
	    white-space: nowrap;
	    cursor: pointer;
	    color: #bbb;
        padding-block: 0;
        padding-inline: var(--star-padding-x);
	    font-size: var(--star-size);
	    line-height: var(--star-size);

        &:before {
            @include fontawesome-font("\f005", regular); // star solid
	        font-style: normal;
        }

        &:hover, 
        &:hover ~ label {
            color: var(--star-hover-color);
        }
    }
}

.star-rating:not(:checked) > label:hover:before,
.star-rating:not(:checked) > label:hover ~ label:before,
.star-rating > label:hover ~ input:checked ~ label:before,
.star-rating > input:checked + label:hover:before,
.star-rating > input:checked + label:hover ~ label:before,
.star-rating > input:checked ~ label:before,
.star-rating > input:checked ~ label:hover:before,
.star-rating > input:checked ~ label:hover ~ label:before {
    @include fontawesome-font("\f005", solid); // star outline
}
	
// CURRENT STATE
.star-rating > input:checked ~ label {
	color: var(--star-checked-color); 
}
